<template>
  <div class="user-management">
    <div class="search-and-button">
      <el-input
        v-model="Sname"
        placeholder="请输入要搜索的店铺名"
        @input="select"
        class="search-input"
      >
      </el-input>
      <el-button type="success" @click="openAddDialog" class="add-user-btn">添加店铺</el-button>
    </div>

    <el-table :data="store" border stripe class="user-table">
      <el-table-column prop="SId" label="编号" align="center"></el-table-column>
      <el-table-column prop="Sname" label="店名" align="center"></el-table-column>
      <el-table-column prop="sales" label="销量" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="warning" @click="openEditDialog(scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="deleteStore(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="size"
      :page-sizes="[5, 10, 20, 30, 40]"
      :total="count"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination"
    >
    </el-pagination>

    <el-dialog title="添加店铺" append-to-body :visible.sync="createDialogVisible">
      <Add :dialogVisible.sync="createDialogVisible" @refresh="select"></Add>
    </el-dialog>

    <el-dialog title="修改店铺" append-to-body :visible.sync="editDialogVisible">
      <Edit :dialogVisible.sync="editDialogVisible" :store="currentStore" @refresh="select"></Edit>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import Add from './add.vue';
import Edit from './edit.vue';

export default {
  name: 'UserManagement',
  components: {
    Add,
    Edit
  },
  data() {
    return {
      count: 0,
      size: 5,
      page: 1,
      Sname: '',
      store: [], // 查询结果
      createDialogVisible: false, // 用于控制 Add 对话框的显示状态
      editDialogVisible: false, // 用于控制 Edit 对话框的显示状态
      currentStore: {} // 当前要编辑的店铺信息
    };
  },
  created() {
    this.select();
  },
  methods: {
    // 初始化数据
    select() {
      axios({
        method: 'get',
        url: 'http://localhost:21371/api/Store',
        params: { page: this.page, limit: this.size, name: this.Sname }
      })
        .then((res) => {
          this.count = res.data.count;
          this.store = res.data.data;
        })
        .catch((err) => {
          console.error('error:', err);
        });
    },
    // 打开添加店铺对话框
    openAddDialog() {
      this.createDialogVisible = true;
    },
    // 打开编辑店铺对话框
    openEditDialog(storeItem) {
      this.currentStore = { ...storeItem };
      this.editDialogVisible = true;
    },
    handleSizeChange(newSize) {
      this.size = newSize;
      this.page = 1; // 改变分页大小时，通常会将当前页码重置为1
      this.select(); // 重新查询
    },
    handleCurrentChange(newPage) {
      this.page = newPage;
      this.select(); // 重新查询
    },
    // 删除店铺
    deleteStore(storeItem) {
      // 提示用户确认是否删除
      this.$confirm('是否确定要删除该店铺？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning' // 使用警告类型，提示用户这是一个重要操作
      })
        .then(() => {
          // 用户确认删除，发送删除请求
          axios({
            method: 'DELETE', // 
            url: 'http://localhost:21371/api/Store',
            params: { SId: storeItem.SId }
          })
            .then(() => {
              this.$message({ type: 'success', message: '删除成功!' });
              this.select(); // 重新加载店铺列表
            })
            .catch((err) => {
              this.$message({ type: 'error', message: '删除失败!' });
              console.error('error:', err);
            });
        })
        .catch(() => {
          // 用户取消删除
          this.$message({ type: 'info', message: '已取消删除' });
        });
    }
  }
};
</script>

<style scoped>
.user-management {
  padding: 20px;
  /* min-height: 100vh; */
}

.search-and-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
  border-radius: 4px;
  margin-right: 10px;
}

.add-user-btn {
  background-color: #67c23a;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
}

.user-table {
  width: 100%;
  margin-top: 15px;
}

.user-table th,
.user-table td {
  text-align: center;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
